<template>
	<view class="container">
		<view id="poster" v-if="posterShow" style="" class="poster">
			<image src="./static/share_post_1.png" mode=""></image>
			<text style="position: absolute;top: 50rpx;left: 60rpx;color: #ffffff;font-size: 36rpx;">{{name}} 【邀请您试乘试驾】</text>
			<canvas style="width: 100rpx;height: 100rpx;position: absolute;bottom: 50rpx;right: 50rpx; " canvas-id="qrcode"></canvas>
		</view>
		<u-popup :show="showInvitePoster">
			<view class="popup">
				<view class="action-wraper">
					<text style="visibility: hidden;">确定</text>
					<text>分享到</text>
					<image @click="showInvitePoster = !showInvitePoster"
						src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode="">
					</image>
				</view>
				<view class="share-wraper2">
					<view class="item" @click="shareImg(1)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png" mode="">
						</image>
						<text>微信</text>
					</view>
					<view class="item" @click="shareImg(2)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-2.png" mode="">
						</image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="shareImg(3)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-3.png" mode="">
						</image>
						<text>微博</text>
					</view>
					<view class="item" @click="shareImg(4)">
						<image src="@appstatic/community/share_4.png" mode="">
						</image>
						<text>保存到本地</text>
					</view>
				</view>
		
			</view>
		
		</u-popup>
		<z-paging ref="paging" v-model="friendsList" @query="getListAPP" :fixed='false' :height='(windowHeight )+"px"'> 
			<view slot="top">
				<view class="searchBar">
					<u-search placeholder="请输入手机号查询" v-model="keyword" class="search" shape="square" bgColor='#EDEDED'
						:showAction="false" @clear="clearTouched" @change="searchTouched"></u-search>
				</view>

			</view>
			<!-- 好友列表 -->
			<view class="friends-list">
				<view class="friends-item" v-for="(item, item_index) in friendsList" :key="item_index">
					<view class="list-cell-title">
						<text class="text-1">{{item.testName}}</text>
						<text class="text-1" style="margin-left: 20rpx;">{{item.phone}}</text>
					</view>
					<view class="Line"></view>
					<view class="list-item" style="margin-top: 28rpx;">
						<view class="line-view" style="margin-top: 32rpx;margin-bottom: 32rpx;">
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="item.testStatus>=0?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
							<view :class="item.testStatus>=1?'line_success':'line'"></view>
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="item.testStatus>=1?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
							<view :class="item.testStatus>=2?'line_success':'line'"></view>
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="item.testStatus>=2?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
						</view>
						<view class="line-view" style="justify-content: space-around;margin-bottom: 32rpx;">
							<view class="line-text-view">
								<view :class="item.testStatus>=0?'text-line-1':'text-line-2'">预约试驾</view>
								<view class="text-line-3" v-if="item.appointmentTime">{{item.appointmentTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
							<view class="line-text-view" style=" width: 220rpx;">
								<view :class="item.testStatus>=1?'text-line-1':'text-line-2'" style=" width: 220rpx;">
									完成试驾</view>
								<view class="text-line-3" v-if="item.completionTime">{{item.completionTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
							<view class="line-text-view">
								<view :class="item.testStatus>=2?'text-line-1':'text-line-2'">完成购车</view>
								<view class="text-line-3" v-if="item.completionCarTime">
									{{item.completionCarTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>


		<view class="cancelBtns">
			<text class="evaluateBtn" @click="inviteFriends">立即分享</text>
		</view>
 
		
		
		<u-popup :show="showInvite">
			<view class="popup">
				<view class="action-wraper">
					<text style="visibility: hidden;">确定</text>
					<text>分享到</text>
					<image @click="showInvite = !showInvite"
						src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode="">
					</image>
				</view>
				<view class="share-wraper">
					<view class="item" @click="shareType(1)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png" mode="">
						</image>
						<text>微信</text>
					</view>
					<!-- 	<view class="item" @click="shareType(2)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-2.png" mode="">
						</image>
						<text>朋友圈</text>
					</view> -->
					<view class="item" @click="shareType(3)">
						<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png" mode="">
						</image>
						<text>海报</text>
					</view>
				</view>

			</view>

		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@/manager/network-manager.js")
	const dialog = require("@/utils/dialog.js")
	import uQRCode from "@/utils/uQrcode.js"
	export default {
		components:{
			},
		data() {
			return {
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight - 100,
				title: '',
				categoryId: '',
				keyword: '',
				friendsList: [],
				showInvite: false,
				qrcodeImg:'',//二维码图片
				
				canvasImages:'',
				canvasWidth:387,	// 宽度
				canvasHeight:686,	// 高度
				shareTitle:'',		// xx邀请您购车
				
				shareImage:'./static/share_post_1.png',	// 背景图片
				// shareImage:'https://dnsverify.pfmoto.com/appstatic/community/article-cover.png',
				qrSize: 100,	// 二维码大小
				qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747',	// 生成二维码的链接
				
				name:app.globalData.userInfo.userName,//邀请人名字
				posterShow:false,
				showInvitePoster:false,
				test:'',
			}
		},
		onReachBottom() {
			console.log('触底了')
		},

		onLoad(options) {
			var that = this
			that.title = options.name
			if (options.categoryId) {
				that.categoryId = options.categoryId
			}
			uni.setNavigationBarTitle({
				title: that.title
			})


		},
		onReady() {
			var that = this
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: that.title
				})
			}, 400)
		},
		onShow() {
			var that = this
			this.$nextTick(function() {
				that.$refs.paging.reload();
			})
			this.shareTitle=app.globalData.userInfo.userName + "[邀请您购车]"
		},
		methods: {
			searchTouched() {
				this.$refs.paging.reload();
			},
			clearTouched() {
				this.$refs.paging.reload();
			},
			//查询商城商品列表（APP）
			getListAPP: function(pageNo, pageSize) {
				var that = this
				var url = app.globalData.config.interfaces.URL_TESTDRIVE_GETINVITE_USERS
				var params = {
					pageNum: pageNo,
					pageSize: pageSize,
					phone: that.keyword,
					userId: app.getUserId(),
				};
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						that.friendsList = res.data.list
						that.$refs.paging.complete(that.friendsList);
					}
				})
			},
			inviteFriends: function(e) {
				this.showInvite = true
			},
			shareType(type) {

				var that = this
				var path = 'module_car/pages/testDrive/testDrive?testRecommendId=' + app.getUserId() + '&isInvited=0'
				if(type===1){
					var url ="https://pfmotordev.hb4oss.xstore.ctyun.cn/images/2022-08-09/%E5%BF%AB%E6%8D%B7%E5%85%A5%E5%8F%A32.png";
					uni.share({
						provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
						scene: "WXSceneSession", //分享到聊天界面
						type: 5, //分享形式 5:小程序
						imageUrl: url, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
						title: '试乘试驾',
						miniProgram: {
							id: 'gh_c784b84e778d', //微信小程序原始id
							path: path,
							type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
							webUrl: 'https://www.pfmoto.com/app' //兼容低版本的网页链接
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						},
						fail: ret => {
							console.log("fail" + JSON.stringify(ret));
						}
					});
					this.showInvite = false
				}
				else if(type===3){		
					// this.$refs.canvas.canvasCreate();
					this.showInvite = false
					this.posterShow=true
					this.showInvitePoster=true
					this.canvasCreate()
					
				}
				
			},
			canvasCreate(){
				var _this=this
				var path = 'module_car/pages/testDrive/testDrive?testRecommendId=' + app.getUserId() + '&isInvited=0'
				setTimeout(()=>{
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: _this,
						text: path,
						size: _this.qrSize,
						margin: 2,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H,
						success: res => {
							// _this.qrcodeImg = res
							// _this.qrCode = res.tempFilePath;
							// _this.onCanvas();
						}
					})
				},200)
				
			},
			shareImg(type){
				const that = this;
				/* 获取屏幕信息 */
				let ws = this.$mp.page.$getAppWebview();
				console.log('走了')
				let bitmap = new plus.nativeObj.Bitmap('test');
				// 将webview内容绘制到Bitmap对象中
				var widowWidth= uni.getSystemInfoSync().windowWidth
				if (plus.os.name == "iOS") {
					console.log('ios')
					ws.draw(
						bitmap,
						function(e) {
							/* 获取base64 */
							that.test = bitmap.toBase64Data();
							/* 加载base64编码 */
							bitmap.loadBase64Data(
								bitmap.toBase64Data(),
								function() {
									console.log('加载Base64图片数据成功');
									/* 保存图片 */
									bitmap.save(
										'_doc/share'+ new Date().getTime()+'.jpg', {},
										async (i) => {
											console.log('保存图片成功：' + JSON.stringify(i));
											uni.saveImageToPhotosAlbum({
												filePath: i.target,
												success: function() {
													/* 清除 */
													bitmap.clear();
													this.drawImg = i.target
													if (type == 1) {
														uni.share({
															provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
															scene: "WXSceneSession", //分享到聊天界面
															type: 2, 
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															success: ret => {
																console.log(JSON.stringify(ret));
															},
															fail: ret => {
																console.log("fail" + JSON.stringify(ret));
															}
														});
													} else if (type == 2) {
														uni.share({
															provider: "weixin",
															scene: "WXSceneTimeline",
															type: 0,
															href: "https://www.pfmoto.com/app",
															summary: '欢迎体验派方机车',
															imageUrl: this.drawImg,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
															}
														});
													} else if (type == 3) {
														uni.share({
															provider: "sinaweibo",
															title: '欢迎下载派方APP',
															summary: "欢迎下载派方APP",
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															href: 'https://www.pfmoto.com/app',
															type: 0,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
															}
														});
													} else {
														uni.showToast({
															title: "保存成功",
															duration: 2000,
															icon: 'none'
														})
													}
												},
												fail(e) {
								
												}
											});
										},
										function(e) {
											console.log('保存图片失败：' + JSON.stringify(e));
										}
									);
								},
								function() {
									console.log('加载Base64图片数据失败：' + JSON.stringify(e));
								}
							);
						},
						function(e) {
							console.log('截屏绘制图片失败：' + JSON.stringify(e));
						}, 
						{
							check: true, // 设置为检测白屏
							// clip: {
							// 	top: app.globalData.navigationBarHeight +'px',
							// 	left:'36px',
							// 	height: app.globalData.navigationBarHeight + 600 +'px',
							// 	width: uni.getSystemInfoSync().windowWidth - 36 +'px',
							// } // 设置截屏区域
							clip: {
								top: app.globalData.navigationBarHeight +'px',
								left: uni.upx2px(72) + 'px',
								height: uni.upx2px(1000) +'px',
								width: uni.getSystemInfoSync().windowWidth + 'px',
							} // 设置截屏区域
						}
					);
				}else{
					console.log('Android')
					ws.draw(
						bitmap,
						function(e) {
							/* 获取base64 */
							that.test = bitmap.toBase64Data();
							/* 加载base64编码 */
							bitmap.loadBase64Data(
								bitmap.toBase64Data(),
								function() {
									console.log('加载Base64图片数据成功');
									/* 保存图片 */
									bitmap.save(
										'_doc/share'+ new Date().getTime()+'.jpg', {},
										async (i) => {
											console.log('保存图片成功：' + JSON.stringify(i));
											uni.saveImageToPhotosAlbum({
												filePath: i.target,
												success: function() {
													/* 清除 */
													bitmap.clear();
													this.drawImg = i.target
													if (type == 1) {
														uni.share({
															provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
															scene: "WXSceneSession", //分享到聊天界面
															type: 2, 
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															success: ret => {
																console.log(JSON.stringify(ret));
															},
															fail: ret => {
																console.log("fail" + JSON.stringify(ret));
															}
														});
													} else if (type == 2) {
														uni.share({
															provider: "weixin",
															scene: "WXSceneTimeline",
															type: 0,
															href: "https://www.pfmoto.com/app",
															summary: '欢迎体验派方机车',
															imageUrl: this.drawImg,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
															}
														});
													} else if (type == 3) {
														uni.share({
															provider: "sinaweibo",
															title: '欢迎下载派方APP',
															summary: "欢迎下载派方APP",
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															href: 'https://www.pfmoto.com/app',
															type: 0,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
															}
														});
													} else {
														uni.showToast({
															title: "保存成功",
															duration: 2000,
															icon: 'none'
														})
													}
												},
												fail(e) {
								
												}
											});
										},
										function(e) {
											console.log('保存图片失败：' + JSON.stringify(e));
										}
									);
								},
								function() {
									console.log('加载Base64图片数据失败：' + JSON.stringify(e));
								}
							);
						},
						function(e) {
							console.log('截屏绘制图片失败：' + JSON.stringify(e));
						}, 
						{
							check: true, // 设置为检测白屏
							// clip: {
							// 	top: app.globalData.navigationBarHeight +'px',
							// 	left:'36px',
							// 	height: app.globalData.navigationBarHeight + 600 +'px',
							// 	width: uni.getSystemInfoSync().windowWidth - 36 +'px',
							// } // 设置截屏区域
							clip: {
								top: app.globalData.navigationBarHeight +'px',
								left: uni.upx2px(72) + 'px',
								height: uni.upx2px(1000) + app.globalData.navigationBarHeight +'px',
								width: uni.getSystemInfoSync().windowWidth - uni.upx2px(72) +'px',
							} // 设置截屏区域
						}
					);
				}
				
			},
			shareSuccess(e){
				console.log('地址',e)
					this.canvasImages = e
				},
			},
			
	}
</script>
<style>
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		
	}
	
	.poster {
		// width: 300px;
		width: calc(100vw - 144rpx);
		height:1000rpx;
		position: absolute;
		top:0;
		left: 72rpx;
		z-index: 10080 ;
	}
	.poster image {
		width: calc(100vw - 144rpx);
		height:1000rpx;
	}

	.searchBar {
		padding: 32rpx;
	}



	.friends-list {
		width: 686rpx;
		display: flex;
		margin-left: 32rpx;
		flex-wrap: wrap;
		flex-direction: column;

		.friends-item {
			margin-bottom: 10px;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: white;

			.text-1 {
				font-weight: 500;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000000;
			}






			.list-cell-title {
				width: 622rpx;
				display: flex;
				flex-direction: row;
				margin-left: 32rpx;
				margin-right: 32rpx;
				margin-top: 20rpx;
				margin-bottom: 16rpx;
				justify-content: flex-start;
				align-items: center;
			}

			.Line {
				width: 686rpx;
				height: 2rpx;
				background-color: #EDEDED;
			}

			.list-item {
				width: 622rpx;
				/* height: 122px; */
				background-color: white;
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;
				margin-right: 32rpx;
				border-radius: 4rpx;
				margin-bottom: 20rpx;
			}

			.line-view {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

			}

			.line {
				width: 110px;
				height: 2px;
				background-color: #ADB0AE;
			}

			.line_success {
				width: 110px;
				height: 2px;
				background-color: #EA5404;
			}

			.line-text-view {
				width: 200rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;

			}

			.text-line-1 {
				font-style: normal;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 38rpx;
				text-align: center;
				color: #EA5404;
				margin-bottom: 8rpx;
			}

			.text-line-2 {
				font-style: normal;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 38rpx;
				text-align: center;
				color: #ADB0AE;
				margin-bottom: 8rpx;
			}

			.text-line-3 {
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: center;
				color: #ADB0AE;
			}





		}


	}

	.cancelBtns {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		position: fixed;
		bottom: 0px;
		padding-bottom: 30px;

		.evaluateBtn {
			width: 686rpx;
			height: 42px;
			line-height: 42px;
			margin-left: 32rpx;
			margin-right: 32rpx;
			color: #ffffff;
			border-radius: 2px;
			font-size: 32rpx;
			text-align: center;
			background: #EA5404;
			border: 1px solid #EA5404;
			box-sizing: border-box;

		}
	}

	
	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	.share-wraper {
		display: flex;

		justify-content: space-around;
		padding: 80rpx;
	}

	.share-wraper .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-wraper .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}

	.share-wraper .item text {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		letter-spacing: -0.24px;
		color: #3D3A3A;
	}
	.share-wraper2 {
		display: flex;
	
		justify-content: space-around;
		padding: 20rpx;
	}
	
	.share-wraper2 .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.share-wraper2 .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}
	
	.share-wraper2 .item text {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		letter-spacing: -0.24px;
		color: #3D3A3A;
	}
</style>
